// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@import '../../common/icons/icon.scss';
@import '../../common/styles/colors.scss';
@import '../../common/styles/fonts.scss';

.content-container {
    display: flex;

    .content-left,
    .content-right {
        flex-grow: 1;
        max-width: 150px;
    }
}

.content-header {
    @include text-style-title-l;

    margin-left: 10px;
    margin-right: 10px;
}

.content {
    flex-grow: 10;
    max-width: 1120px;
    font-family: $font-family;
    font-size: 14px;
    margin: 10px;
    word-break: break-word;

    table {
        font-family: $font-family;
        font-size: 14px;
    }

    h1 {
        @include text-style-title-l;
    }

    h2 {
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 32px;
    }

    h3 {
        font-size: 14px;
    }

    h4 {
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 4px;
    }

    h5 {
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 4px;
    }

    a {
        font-weight: 400;
    }

    ol {
        -webkit-padding-start: 16px; // Chrome versions before 87 use non-standard name: https://caniuse.com/mdn-css_properties_padding-inline-start
        padding-inline-start: 16px;

        li ul li {
            list-style-type: disc;
        }
    }

    .content-hyperlinks {
        .insights-link {
            line-height: 20px;
            margin-bottom: 6px;
            display: block;
        }

        .content-inline {
            line-height: 20px;
            margin-bottom: 6px;

            .insights-link {
                display: inline;
            }
        }
    }

    .code-example {
        .code-example-code {
            font-family: $code-font-family;
            margin-block-start: 1em;
            margin-block-end: 1em;
        }

        .code-example-title {
            h4 {
                display: inline;
                margin-block-start: 0;
            }
        }
    }

    .columns {
        margin-top: 40px;
        @media screen and (width >= 800px) {
            display: flex;
        }
    }

    .column {
        padding: 10px;
        flex-grow: 1;
        flex-basis: 0;
        max-width: 520px;
    }

    .column + .column {
        @media screen and (width >= 800px) {
            margin-left: 80px;
        }
    }

    $icon-size: 16px;
    $do-color: $positive-outcome;
    $dont-color: $negative-outcome;

    .insights-code {
        font-family: $code-font-family;
    }

    .pass-fail-grid {
        display: grid;
        grid-template-areas:
            'fail-section pass-section'
            'fail-example pass-example';
        border: 1px solid $neutral-60;
        word-break: break-word;
    }

    .fail-section,
    .fail-example,
    .pass-section,
    .pass-example {
        padding: 15px;
    }

    .fail-example,
    .pass-example {
        border-top: 1px solid $neutral-60;
    }

    .fail-section,
    .fail-example {
        border-right: 1px solid $neutral-60;
    }

    .fail-section {
        grid-area: fail-section;
    }

    .fail-example {
        grid-area: fail-example;
    }

    .pass-section {
        grid-area: pass-section;
    }

    .pass-example {
        grid-area: pass-example;
    }

    .do-header,
    .pass-header,
    .dont-header,
    .fail-header {
        width: 100%;
    }

    .do-header,
    .dont-header {
        .check-container {
            margin-top: 9px;
            float: right;
        }

        h2 {
            display: inline;
        }
    }

    .pass-header,
    .fail-header {
        h3 {
            display: inline;
        }
    }

    .do-section,
    .pass-section,
    .pass-example {
        .highlight {
            color: $do-color;
            font-weight: bold;
        }
    }

    .dont-section,
    .fail-section,
    .fail-example {
        .highlight {
            color: $dont-color;
            font-weight: bold;
        }
    }

    .do-header {
        @include check-icon-styles($icon-size, 0, $do-color);

        border-bottom: 2px solid $do-color;
    }

    .dont-header {
        @include cross-icon-styles($icon-size, 0, $dont-color);

        border-bottom: 2px solid $dont-color;
    }

    .pass-header {
        @include check-icon-styles(12px, 0, $do-color);
    }

    .fail-header {
        @include cross-icon-styles(12px, 0, $dont-color);
    }

    .table {
        list-style: none;
        margin-top: 12px;
        display: table;
        border-collapse: separate;
        border-spacing: 5px;
        padding-left: 18px;
    }

    .accessibility-problems-list {
        background: $neutral-6;
        list-style-type: disc;
    }

    .landmark-table {
        border-spacing: 5px;

        @media screen and (width >= 600px) {
            padding-left: 32px;
        }

        .landmark-table-column {
            width: 24%;
        }

        .landmark-role {
            text-align: center;
            border-style: dashed;
            border-width: 3px;
        }

        td,
        th {
            padding: 5px;
            vertical-align: text-top;
        }

        th {
            background: $neutral-100;
            color: $neutral-0;
            font-weight: 400;
        }

        td {
            background: $neutral-10;
            color: $neutral-100;
        }

        .contentinfo-landmark {
            border-color: $landmark-contentinfo;
        }

        .main-landmark {
            border-color: $landmark-main;
        }

        .complementary-landmark {
            border-color: $landmark-complementary;
        }

        .banner-landmark {
            border-color: $landmark-banner;
        }

        .region-landmark {
            border-color: $landmark-region;
        }

        .navigation-landmark {
            border-color: $landmark-navigation;
        }

        .search-landmark {
            border-color: $landmark-search;
        }

        .form-landmark {
            border-color: $landmark-form;
        }
    }

    .landmarks-legend {
        color: $neutral-100;
        font-size: 14px;
        display: table-cell;
        width: 110px;
        text-align: center;
        font-weight: 400;
        padding: 4px;
        vertical-align: middle;
        border-style: dashed;
        border-width: 3px;

        &.contentinfo-landmark {
            border-color: $landmark-contentinfo;
        }

        &.main-landmark {
            border-color: $landmark-main;
        }

        &.complementary-landmark {
            border-color: $landmark-complementary;
        }

        &.banner-landmark {
            border-color: $landmark-banner;
        }

        &.region-landmark {
            border-color: $landmark-region;
        }

        &.navigation-landmark {
            border-color: $landmark-navigation;
        }

        &.search-landmark {
            border-color: $landmark-search;
        }

        &.form-landmark {
            border-color: $landmark-form;
        }
    }
}
